<template>
  <Form
    ref="saleForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    inline
    :label-width="85">
    <Row>
      <Col :md="8" :lg="6">
        <FormItem prop="ctime" label="加入日期：">
          <!-- <DatePicker v-model="row.probation" format="yyyy-MM-dd" type="daterange" placeholder="请输入试用期" @on-change="handleChange"></DatePicker> -->
          <DatePicker v-model="form.ctime" type="daterange" format="yyyy-MM-dd" placeholder="请选择加入日期" @on-change="handleChange"></DatePicker>
      </FormItem>
      </Col>
      <Col :md="8" :lg="6">
        <FormItem prop="coludname" label="云销售姓名：">
          <Input type="text" v-model="form.coludname" placeholder="请输入云销售姓名" />
        </FormItem>
      </Col>
      <Col :md="8" :lg="6">
        <FormItem prop="muid" label="签约销售：">
          <Select v-model="form.muid">
            <Option value="all">
              全部
            </Option>
            <Option v-for="item in nameList" :value="item.id" :key="item.id">
              {{ item.uname }}
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="6" style="text-align: right">
        <FormItem>
          <Button @click="handleSubmit" icon="md-search" type="primary">
            搜索
          </Button>
        </FormItem>
      </Col>
    </Row>

    <!-- <FormItem prop="type" label="版页类型：" style="width: 250px">
      <Select v-model="form.type" clearable>
        <Option value="all">
          全部
        </Option>
        <Option value="活动推广">
          活动推广
        </Option>
        <Option value="产品">
          产品
        </Option>
      </Select>
    </FormItem> -->

  </Form>
</template>
<script>
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  name: 'SaleForm',
  props: {
    ctimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    coludnameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    muidRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      form: {
        ctime: [],
        coludname: '',
        muid: 'all'
      }
    }
  },
  computed: {
    ...mapState({
      nameList: state => state.user.nameList
    }),
    rules () {
      return {
        ctime: this.ctimeRules,
        coludname: this.coludnameRules,
        muid: this.salenameRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.saleForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            ctime: `${this.form.ctime[0]} ${this.form.ctime[1]}`,
            suname: this.form.coludname,
            muid: this.form.muid && this.form.muid !== 'all' ? this.form.muid : ''
          })
        }
      })
    },
    handleChange (value) {
      this.form.ctime = value
    }
  }
}
</script>
